<template>
  <div class="app-container">
    <div>
      <el-button type="primary" size="small" icon="el-icon-refresh" @click="getDeptList()">
        刷新
      </el-button>
      <el-button type="primary" size="small" icon="el-icon-plus">
        新增
      </el-button>
    </div>
    <el-table
      v-loading="dataLoading"
      :data="tableData"
      style="width: 100%;margin: 20px auto;"
      row-key="id"
      border
      default-expand-all
      :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
    >
      <el-table-column prop="name" label="名称" />
      <el-table-column prop="parentName" align="center" label="上级部门" />
      <el-table-column width="150" align="center" label="部门类型">
        <template slot-scope="scope">
          <el-tag size="small">
            {{ scope.row.type | deptTypeFilter }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="code" align="center" width="150" label="部门编号" />
      <el-table-column width="150" align="center" label="状态">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.disable" size="small" type="danger" effect="dark">
            禁用
          </el-tag>
          <el-tag v-else size="small" effect="dark">
            正常
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="创建时间" align="center" sortable width="180" />
      <el-table-column align="center" label="操作" width="200">
        <template slot-scope="scope">
          <el-tooltip content="新增" placement="top">
            <el-button
              type="primary"
              size="mini"
              icon="el-icon-plus"
              circle
              @click="openAdd(scope.row.deptId)"
            />
          </el-tooltip>
          <el-tooltip content="修改" placement="top">
            <el-button
              type="primary"
              size="mini"
              icon="el-icon-edit"
              circle
              @click="addOrUpdateHandle(scope.row.deptId)"
            />
          </el-tooltip>
          <el-tooltip content="删除" placement="top">
            <el-button
              type="danger"
              size="mini"
              icon="el-icon-delete"
              circle
              @click="deleteHandle(scope.row.deptId)"
            />
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>

    <!-- 新增部门 -->
    <!-- <el-dialog :visible.sync="addFormVisible" :title="title" width="28%">
      <el-form
        ref="deptForm"
        :model="deptForm"
        :rules="deptFormRules"
        class="demo-ruleForm"
        prop="name"
        size="mini"
      >
        <el-form-item :label-width="formLabelWidth" label="部门名称" required prop="name">
          <el-input v-model="deptForm.name" placeholder="请输入部门名称（6-12位）" autocomplete="off" />
        </el-form-item>
        <el-form-item
          :label-width="formLabelWidth"
          :rules="[
            { required: true, message: '部门编码',trigger: 'blur'},
          ]"
          label="部门编码"
          prop="userName"
        >
          <el-input v-model="deptForm.code" placeholder="请输入部门编码（6-12位）" autocomplete="off" />
        </el-form-item>
        <el-form-item
          :rules="[
            { required: true, message: '请选择用户所属的部门',trigger: 'change'},
          ]"
          :label-width="formLabelWidth"
          prop="parentCode"
          label="所属机构"
        >
          <el-cascader
            v-model="deptForm.parentCode"
            :options="deptInfoTreeData"
            placeholder="选择所属上级部门"
            filterable
            style="width:100%"
          />
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" prop="orderNum" label="排序">
          <el-input v-model="deptForm.orderNum" autocomplete="off" />
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="状态">
          <el-radio v-model="deptForm.status" label="1">
            正常
          </el-radio>
          <el-radio v-model="deptForm.status" label="2">
            禁用
          </el-radio>
        </el-form-item>
      </el-form>
      <span style="padding-left:35%" class="dialog-footer">
        <el-button :loading="submitLoad" size="mini" type="primary">确 定</el-button>
        <el-button size="mini" @click="addFormVisible = false">取 消</el-button>
      </span>
    </el-dialog> -->
    <add v-if="addFormVisible" :dept-id="88" />
  </div>
</template>

<script>
import add from './component/add'
export default {
  components: {
    add
  },
  filters: {
    deptTypeFilter(val) {
      switch (val) {
        case 0:
          return '总部'
        case 1:
          return '省公司'
        case 2:
          return '部门'
        default:
          return val
      }
    }
  },
  data() {
    return {
      dataLoading: false,
      title: '新增部门',
      addFormVisible: true,
      formLabelWidth: '80px',
      deptForm: {
        name: '',
        code: '',
        parentCode: '',
        orderNum: null,
        status: '1'
      },
      deptInfoTreeData: [],
      expandAll: false,
      tableData: [],
      deptDataList: {},
      args: [null, null, 'timeLine']
    }
  },
  computed: {},
  created() {
    this.getDeptList()
  },
  activated() {
    this.getDeptList()
  },
  methods: {
    // 获取部门信息（tree结构）
    getDeptList() {
      this.dataLoading = true
      this.httpRequest({
        url: '/sys/dept/list',
        method: 'get'
      }).then(response => {
        if (response.code === 0) {
          this.tableData = response.body
        }
        this.dataLoading = false
      })
    },

    openAdd() {
      this.getAllDept()
      this.addFormVisible = true
    },
    // 获取部门信息
    getAllDept() {
      const that = this
      this.httpRequest({
        url: '/sys/dept/list/frontShow',
        responseType: 'json',
        method: 'get'
      }).then(function(response) {
        console.log(response.body)
        that.deptInfoTreeData = response.body
      })
    },
    message(row) {
      this.$message.info(row.event)
    }
  }
}
</script>
